<template>
  <div>
    <!-- 头部 -->
    <van-row class="row">
      <van-col span="8">
        <van-icon name="checked" color="#8b0000" />
        30天无忧退货</van-col
      >
      <van-col span="8">
        <van-icon name="checked" color="#8b0000" />
        48小时快速退费</van-col
      >
      <van-col span="8">
        <van-icon name="checked" color="#8b0000" />
        满88元免邮费
      </van-col>
    </van-row>
    <!-- 空状态 -->
    <van-empty
      class="custom-image"
      image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
      description="购物车为空"
      v-show="show"
    />
    <!-- 商品盒子 -->
    <div
      class="box"
      v-show="show2"
      v-for="(item, index) in cartList"
      :key="index"
    >
      <van-checkbox
        v-model="item.checked"
        class="van1"
        @change="check(item.checked, item.product_id)"
      ></van-checkbox>
      <van-swipe-cell class="cell">
        <van-card
          :num="item.number"
          :price="item.retail_price | price2"
          :title="item.goods_name"
          class="goods-card"
          :thumb="item.list_pic_url"
        />
        <div class="step">
          <van-stepper
            v-model="item.number"
            min="1"
            max="100"
            v-show="bool"
            @change="
              change(item.goods_id, item.id, item.number, item.product_id)
            "
          />
        </div>
        <template #right>
          <van-button
            square
            text="删除"
            type="danger"
            class="delete-button"
            @click="del(item.product_id)"
          />
        </template>
      </van-swipe-cell>
    </div>
    <!--底部全选 价格 -->
    <van-submit-bar
      :price="cartTotal.checkedGoodsAmount"
      button-text="立即购买"
      @submit="onSubmit"
      class="bar"
    >
      <van-checkbox v-model="checked" @click="checkAll(checked)" ref="ckeck"
        >全选</van-checkbox
      >
      <van-button type="primary" size="small" @click="step()" v-show="boolen"
        >编辑</van-button
      >
      <van-button type="primary" size="small" @click="step()" v-show="boolen2"
        >完成编辑</van-button
      >
    </van-submit-bar>
    <div class="boot"></div>
  </div>
</template>

<script>
import { Cartlist, CartUpdate, Cartchecked, CartDel } from "../request/api.js";
export default {
  data() {
    return {
      checked: false,
      show: true,
      show2: false,
      cartList: [],
      cartTotal: {},
      bool: false,
      boolen: true,
      boolen2: false,
      check2: "",
      productIds: "",
    };
  },
  methods: {
    onSubmit() {},
    //点击编辑 弹出步进器
    step() {
      this.bool = !this.bool;
      this.boolen = !this.boolen;
      this.boolen2 = !this.boolen2;
    },
    //点击步进器 进行重新更改数值
    change(goodid, id, num, prid) {
      CartUpdate({ goodsId: goodid, id: id, number: num, productId: prid })
        .then((res) => {
          // console.log(res);
          this.cartTotal.checkedGoodsAmount = parseInt(
            res.data.cartTotal.checkedGoodsAmount.toString() + "00" + ".00"
          );
        })
        .catch((err) => {
          // console.log(err);
        });
    },
    //点击单选复选框
    check(check, id) {
      // console.log(check,id);
      let v = check ? 1 : 0;
      Cartchecked({ isChecked: v, productIds: id })
        .then((res) => {
          // console.log(res);
          //赋值
          this.cartTotal.checkedGoodsAmount = parseInt(
            res.data.cartTotal.checkedGoodsAmount.toString() + "00" + ".00"
          );
        for(let i=0;i<this.cartList.length;i++){
          if(this.cartList[i].checked==1){
            this.checked=true
           }else{
             this.checked=false
           }
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 全选按钮
    checkAll(check) {
      let v = check ? 1 : 0;
      let productIdAllList = [];
      this.cartList.forEach((item) => {
        productIdAllList.push(item.product_id.toString());
      });
      this.productIds = productIdAllList.join(",");
      Cartchecked({ isChecked: v, productIds: this.productIds })
        .then((res) => {
          // console.log(res);
          //赋值
          // this.checked=true
          this.cartTotal.checkedGoodsAmount = parseInt(
            res.data.cartTotal.checkedGoodsAmount.toString() + "00" + ".00"
          );
          this.cartList=res.data.cartList
          this.$router.go(0)
          // 判断
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //删除商品
    del(id) {
      // console.log(id);
      let id2 = String(id);
      CartDel({ productIds: id2 })
        .then((res) => {
          this.$toast.success("删除成功");
          this.$router.go(0);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  created() {
    //获取以添加的商品数据
    Cartlist({})
      .then((res) => {
        // console.log(res);
        this.cartList = res.data.cartList;
        
        this.cartTotal = res.data.cartTotal;
        this.cartTotal.checkedGoodsAmount = parseInt(
          res.data.cartTotal.checkedGoodsAmount.toString() + "00" + ".00"
        );
        if (this.cartList.length > 0) {
          this.show = !this.show;
          this.show2 = !this.show2;
        }
        for(let i=0;i<this.cartList.length;i++){
          if(this.cartList[i].checked==1){
            this.checked=true
          }
        }
      })
      .catch((err) => {
        console.log(err);
      });
  },
  //过滤器
  filters: {
    price2(val) {
      return val.toFixed(2) + "元";
    },
  },
};
</script>

<style lang="less" scoped>
.row {
  font-size: small;
}
.custom-image .van-empty__image {
  padding-top: 1rem;
  width: 2rem;
  height: 2rem;
}
.delete-button {
  height: 100%;
}
.bar {
  margin-bottom: 0.5rem;
}
.box {
  display: flex;
  justify-content: space-between;
  width: 98%;
  margin: auto;
  margin-top: 0.2rem;
  .van1 {
    background-color: #fff;
    padding: 0 0.1rem;
  }
  .cell {
    width: 95%;
  }
  .goods-card {
    margin: 0;
    background-color: white;
    width: 100%;
  }
}
.boot {
  height: 1rem;
}
.step {
  width: 100%;
  background-color: #fff;
  float: right;
  right: 0;
}
</style>